#{extends 'main.html' /}
#{set 'title'}&{'admin.roles.add.page.title'}#{/set}

<div id="content">
	<div class="row">
		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
			<h1 class="page-title txt-color-blueDark">
				<i class="fa fa-table fa-fw "></i> 
				<a href="/admin/roles/all">&{'admin.roles.add.page.title'}</a> <span>> &{'admin.roles.add.breadcrumb'}</span>
			</h1>
		</div>
		<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
			<ul id="sparks" class="">
				<li class="sparks-info">
					<a href="/admin/roles/all" class="btn btn-default">&{'template.general.button.back'}</a>
				</li>
			</ul>
		</div>
	</div>

	<section id="widget-grid" class="">

		<article class="col-sm-12 col-md-12 col-lg-12">
			<div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false">

				<header>
					<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
					<h2>&{'admin.roles.add.page.title'}</h2>
				</header>

				<div>
					<div class="widget-body no-padding">

						<form class="smart-form" method="POST" action="/admin/roles/save">
							<header>
								<h2>&{'admin.roles.add.header'}</h2>	
							</header>
							
							<fieldset>
								<section>
									<label class="label">&{'admin.roles.add.form.label.name'}:</label>
									<label class="input">
										<input type="text" name="name"/>
									</label>
								</section>
								<section>
									<label class="label">&{'admin.roles.add.form.label.description'}:</label>
									<label class="input">
										<input type="text" name="description">
									</label>
								</section>
							</fieldset>

							<footer>
								<button type="submit" class="btn btn-primary">
									&{'admin.roles.add.button.save'}
								</button>
							</footer>
						</form>
					</div>
				</div>
			</div>
		</article>
	</section>
</div>